<script setup>
import {
  measurePolyline,
  measurePolygon,
  measureTriangle,
  removePolylineEventHander,
  removePolygonEventHander,
  removeTriangleEventHander,
  clearMeasureAll,
} from '@/cesium/measure'

import { storeToRefs } from 'pinia'
import useMapStore from '@/stores/modules/map'

const mapStore = useMapStore()
const { viewer, isShowMeasure, isMeasure } = storeToRefs(mapStore)

// 开启/关闭距离测量
const handleMeasureDistance = () => {
  if (isMeasure.value.area) {
    isMeasure.value.area = false
    removePolygonEventHander()
  }
  if (isMeasure.value.triangle) {
    isMeasure.value.triangle = false
    removeTriangleEventHander()
  }

  if (!isMeasure.value.distance) {
    isMeasure.value.distance = true
    measurePolyline(viewer.value)
  } else {
    isMeasure.value.distance = false
    removePolylineEventHander()
  }
}
// 开启/关闭面积测量
const handleMeasureArea = () => {
  if (isMeasure.value.distance) {
    isMeasure.value.distance = false
    removePolylineEventHander()
  }
  if (isMeasure.value.triangle) {
    isMeasure.value.triangle = false
    removeTriangleEventHander()
  }

  if (!isMeasure.value.area) {
    isMeasure.value.area = true
    measurePolygon(viewer.value)
  } else {
    isMeasure.value.area = false
    removePolygonEventHander()
  }
}
// 开启/关闭三角量测
const handleMeasureTriangle = () => {
  if (isMeasure.value.distance) {
    isMeasure.value.distance = false
    removePolylineEventHander()
  }
  if (isMeasure.value.area) {
    isMeasure.value.area = false
    removePolygonEventHander()
  }

  if (!isMeasure.value.triangle) {
    isMeasure.value.triangle = true
    measureTriangle(viewer.value)
  } else {
    isMeasure.value.triangle = false
    removeTriangleEventHander()
  }
}

// 清除全部测量
const handleClearMeasure = () => {
  clearMeasureAll(viewer.value)
}
</script>

<template>
  <div class="measure" v-show="isShowMeasure">
    <div class="title">三维测量面板</div>
    <div class="content">
      <div class="item">
        <span>量测: </span>
        <el-button
          :class="{ 'btn-active': isMeasure.distance }"
          type="primary"
          @click="handleMeasureDistance"
          >距离量测</el-button
        >
        <el-button
          :class="{ 'btn-active': isMeasure.area }"
          type="primary"
          @click="handleMeasureArea"
          >面积量测</el-button
        >
        <el-button
          :class="{ 'btn-active': isMeasure.triangle }"
          type="primary"
          @click="handleMeasureTriangle"
          >三角量测</el-button
        >
      </div>
      <div class="vertical-line"></div>
      <div class="item">
        <span>清除: </span>
        <el-button @click="handleClearMeasure">清除量测</el-button>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.measure {
  position: absolute;
  top: 110px;
  right: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid #000;
  border-radius: 10px;

  .title {
    display: flex;
    align-items: center;
    height: 30px;
    padding: 20px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-bottom: 1px solid #000;
  }
  .content {
    padding: 20px;

    .item {
      display: flex;
      align-items: center;

      span {
        color: #fff;
        margin-right: 10px;
      }
      .btn-active {
        background-color: #0059ff;
      }
    }
    .vertical-line {
      width: 5px;
      height: 30px;
      background-color: #0fbaee;
    }
  }
}
</style>
